import cardItem from './components/card-item.vue'
import iButton from '@/components/carGoods/i-button.vue'
import iSharePopup from '@/components/i-share-popup.vue'
import { share } from '@/utils/common-api.js'

export default {
  components: { cardItem, iButton, iSharePopup },

  data() {
    return {
      titleList: [{
        name: '全部'
      }, {
        name: '出售中'
      }, {
        name: '已下架'
      }],
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的

      // 车品数据列表
      list: {
        '0': [],  // 全部的列表
        '1': [],  // 出售中的列表
        '2': []  // 下架的列表
      },
      // 车品列表当前页码
      pageNows: {
        '0': 1,  // 全部的列表
        '1': 1,  // 出售中的列表
        '2': 1  // 下架的列表
      },
      loadMoreStatus: ['loadmore', 'loadmore', 'loadmore'],  // 列表加载更多

      categoryList: [],  // 分类列表
      categoryTitle: '分类', // 选中分类的label标题值
      categoryValue: '-1', // 选中分类的值
      downStatus: false, // 分类下拉筛选控制高度的
      sharePopupShow: false, // 分享弹出显示
      shareDataId: 0, // 分享的数据Id
    }
  },

  onLoad(option) {
    // 加载页面如果有传入的参数，则是从批量管理页面或者我的页面快捷进入
    this.swiperCurrent = option.status || 0
    this.current = option.status || 0
  },

  created() {
    uni.showLoading() // 首次进来显示loading弹窗
    // 加载完成发送获取车品列表、分类列表请求
    this.getGoodsList()
    this.getCategoryList()
  },

  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },

    // 监听切换swiper事件
    swiperChange(e) {
      let i = e.detail.current
      this.swiperCurrent = i
      // this.pageNows[i] = 1
      // 如果切换到的列表数据为空，则请求数据
      if (this.list[i].length === 0) {
        uni.showLoading()
        this.getGoodsList()
      }
    },

    // scroll-view到底部加载更多
    onreachBottom() {
      if (this.loadMoreStatus[this.swiperCurrent] !== 'nomore') {
        this.getGoodsList()
      }
    },

    // 跳转到批量管理 或 发布车品页面
    goPages(page) {
      uni.navigateTo({
        url: `/pages_carGoods/${page}/${page}`
      })
    },

    // 获取车品管理列表
    async getGoodsList() {
      this.loadMoreStatus.splice(this.swiperCurrent, 1, 'loading')
      try {
        let data = {
          'pageIndex': this.pageNows[this.swiperCurrent],
          'pageSize': 10,
          'store_Id': this.$store.state.userInfoDetail.store.storeId,
          'goodsStatae': this.swiperCurrent,  // 商品状态：0全部，1出售中，2已下架
          'typeId': this.categoryValue === '-1' ? '' : this.categoryValue  // 分类id
        }
        const res = await this.$api.carGoods.GetGoodsCarSupplieManagementList(data)
        console.log('看看列表', this.list)
        // 给当前tab页的list列表赋值数据
        this.list[this.swiperCurrent] = [...this.list[this.swiperCurrent], ...res.data.list]
        let length = res.data.list.length
        this.loadMoreStatus.splice(this.swiperCurrent, 1, length < 10 ? 'nomore' : 'loadmore')
        // 返回的数据不为空时，将当前页码加1
        if (length !== 0) {
          this.pageNows[this.swiperCurrent] += 1
        }
      } catch (err) {
        //
        this.loadMoreStatus.splice(this.swiperCurrent, 1, 'loadmore')
      }
      uni.hideLoading()
    },

    // 获取分类列表
    async getCategoryList() {
      try {
        let data = {
          'pageIndex': 1,
          'pageSize': 100,
        }
        const res = await this.$api.carGoods.GetGoodsCarSupplieTypeListPaged(data)
        this.categoryList = res.data.list.map(item => ({ label: item.name, value: item.id }))
        this.categoryList.unshift({ label: '全部分类', value: '-1' })
      } catch (e) {
        //
      }
    },

    // 监听选择分类下拉筛选
    categoryChange(val) {
      // 如果选中的分类id是-1，则将分类标题改成: '分类'
      this.categoryTitle = val === '-1' ? '分类' : this.categoryList.find(item => item.value === val).label
      this.categoryValue = val
      // 根据分类筛选列表，需要重置当前页数和列表
      this.pageNows[this.swiperCurrent] = 1
      this.list[this.swiperCurrent] = []
      uni.showLoading()
      this.getGoodsList()
    },

    // 点击分享按钮
    openSharePopup(id) {
      this.sharePopupShow = !this.sharePopupShow
      this.shareDataId = id
    },

    // 点击分享按钮执行
    handleShare(e) {
      // 分享方法
      share({
        type: 0,
        scene: e,
        summary: '超值特惠车品，速抢',
        href: 'https://ztcbs.yzsheng.com/#/pages_carGoods/carGoodsDetail/carGoodsDetail?id=' + this.shareDataId
      }, status => {
        if (status) {
          uni.hideToast() // 关闭生成中提示
        } else {
          uni.showToast({
            title: '分享失败',
            duration: 2000,
            icon: 'none'
          })
        }
      })
    }
  }
}
